<script setup lang="ts">
import { ref } from 'vue'
import { loadAgriculturalProductsUsingGet } from '@/services/home'
import type { AgriculturalProducts, PageParams } from '@/types/home.d'
import agriculturalProduct from '@/pages/agriculturalProduct/agriculturalProduct.vue'
import { onLoad } from '@dcloudio/uni-app'

const agriculturalProductsList = ref<AgriculturalProducts[]>([])
const finish = ref(false)
//分页参数
const pageParams: Required<PageParams> = {
  //此处使用了Required 可选转为必选
  pageNum: 1,
  pageSize: 10,
}
const loadAgriculturalProductsUsingGetData = async () => {
  if (finish.value === true) {
    return uni.showToast({ icon: 'none', title: '没有更多了' })
  }
  const res = await loadAgriculturalProductsUsingGet(pageParams)
  agriculturalProductsList.value.push(...res.data.data)
  // 分页条件
  if (pageParams.pageNum < res.data.total) {
    //页码累加
    pageParams.pageNum++
  } else {
    finish.value = true
  }
}
//重置数据
const resetData = () => {
  pageParams.pageNum = 1
  agriculturalProductsList.value = []
  finish.value = false
}
const onScrollToLower = () => {
  loadAgriculturalProductsUsingGetData()
}
//自定义下拉刷新被触发
const isTriggered = ref(false)
const onRefresherRefresh = async () => {
  //开始动画
  isTriggered.value = true
  //重置数据
  resetData()
  //一个一个请求太慢，需要同时发送请求，但等到全部加载完成后在结束 使用  Promise.all()
  await Promise.all([loadAgriculturalProductsUsingGetData()])
  //结束动画
  isTriggered.value = false
}
onLoad(() => {
  loadAgriculturalProductsUsingGetData()
})
</script>

<template>
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefresherRefresh"
    :refresher-triggered="isTriggered"
    @scrolltolower="onScrollToLower"
    scroll-y
    class="scroll-view"
  >
    <view class="AgriculturalProducts">
      <view class="agriculturalProducts-container">
        <navigator
          class="agriculturalProducts-item"
          v-for="item in agriculturalProductsList"
          :key="item.id"
          :url="`/pages/agriculturalProduct/agriculturalProduct?id=${item.id}`"
        >
          <image
            class="agriculturalProducts-productImg"
            :src="item.productImg"
            mode="aspectFill"
          ></image>
          <view class="agriculturalProducts-info">
            <view class="agriculturalProducts-productName">{{ item.productName }}</view>
          </view>
        </navigator>
      </view>

      <view class="loading-text" v-if="!finish"> 正在加载...</view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
.AgriculturalProducts {
  display: flex;
  flex-direction: column;
  padding: 10px 10px;
  background-color: #f3f4f6;
  min-height: 100vh;
}

.agriculturalProducts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.agriculturalProducts-item {
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;

  // 在悬停时添加浮动效果，离开时恢复
  &:hover {
    transform: translateY(-6px); // 向上浮动 6px
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); // 加强阴影效果
  }
}

.agriculturalProducts-productImg {
  width: 100%;
  height: 160px;
  border-radius: 10px 10px 0 0;
  object-fit: cover;
}

.agriculturalProducts-info {
  padding: 10px;
  width: 100%;
  background-color: #ffffff;
  text-align: left;
  box-sizing: border-box;
}

.agriculturalProducts-productName {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 6px;
}

.agriculturalProducts-productDesc {
  font-size: 13px;
  color: #606f7b;
  margin-bottom: 4px;
  line-height: 1.4;
}

.agriculturalProducts-remark {
  font-size: 12px;
  color: #9fa6b2;
  margin-bottom: 8px;
}

.scroll-view {
  height: 100vh; /* 确保scroll-view足够高 */
  overflow-y: auto; /* 允许垂直滚动 */
}

.loading-text {
  text-align: center;
  font-size: 14px;
  color: #909399;
  padding: 15px 0;
}
</style>
